<template>
	<div class="main-box">
		<div class="card table-list">
			<el-input v-model="searchKey" placeholder="搜索数据表" :suffix-icon="Search" />
			<el-button type="primary" size="small" :icon="Plus" class="add-btn" @click="openDialog('新增')">新增数据表</el-button>
			<ul class="table-items">
				<li class="table-item" v-for="item in tableList" :key="item.tableName">
					<div class="table-item_meta">
						<div class="table-item_title sle">{{ item.tableLabel }}</div>
						<div class="table-item_desc" sle>{{ item.tableName }}</div>
					</div>
					<ul class="actions">
						<li><el-button size="small" link type="primary" @click="openDialog('修改')">修改</el-button></li>
						<li><el-button size="small" link type="danger">删除</el-button></li>
					</ul>
				</li>
			</ul>
		</div>
		<ColumnTable />
		<TableDialog ref="dialogRef" />
	</div>
</template>
<script setup lang="ts" name="systemFreeTable">
import { ref, reactive } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";
import ColumnTable from "./components/columnTable.vue";
import TableDialog from "./components/tableDialog.vue";
import { User } from "@/api/interface";

const dialogRef = ref<DialogExpose>();
const openDialog = (title: string, rowData: Partial<User.ResUserList> = {}) => {
	let params = {
		title,
		rowData: { ...rowData }
	};
	dialogRef.value!.acceptParams(params);
};
const searchKey = ref("");
const tableList = reactive([
	{
		tableLabel: "资产表",
		tableName: "x_asset"
	},
	{
		tableLabel: "配件表",
		tableName: "x_goods"
	}
]);
</script>
<style lang="scss" scoped>
.table-list {
	width: 230px;
	height: 100%;
	padding: 18px;
	margin-right: 10px;
	.add-btn {
		margin: 10px 0 20px;
	}
	.table-items {
		list-style: none;
		margin: 0;
		padding: 0;
		.table-item {
			color: var(--el-text-color-regular);
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.table-item_meta {
				max-width: 120px;
				cursor: pointer;
				.table-item_desc {
					font-size: 12px;
					color: var(--el-text-color-regular);
					margin-top: 5px;
				}
			}
			.actions {
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					display: inline-block;
				}
			}
		}
	}
}
</style>
